<script setup>
import { map } from 'lodash-es';
const props = defineProps({
  list: { type: Array, default: () => [] },
});
const emit = defineEmits(['handleClick']);
const { list } = toRefs(props);
const sliderItem = ref();
const showAnimate = computed(() => {
  return map(sliderItem.value, v => (v.getBoundingClientRect().width > 100 ? true : false));
});
const activeTag = ref(null);
const sliderWrapper = ref(null);
const currentPosition = ref(0);
const visibleItems = computed(() => {
  if (list.value?.length) {
    // activeTag.value = null;
    const start = Math.max(0, currentPosition.value);
    const end = Math.min(currentPosition.value + 2, list.value.length - 1);
    return end === list.value.length - 1 ? list.value.slice(start) : list.value.slice(start, end + 1);
  }
});

const slidePrev = () => {
  if (currentPosition.value > 0) currentPosition.value--;
};

const slideNext = () => {
  if (currentPosition.value < list.value.length - 3) currentPosition.value++;
};

const handleClick = item => {
  activeTag.value = item.id;
  emit('handleClick', item);
};

defineExpose({ activeTag, currentPosition });
</script>

<template>
  <div class="u-df-spb u-fd-col slider-container" v-show="visibleItems?.length > 0">
    <button class="slider-button" @click="slidePrev">
      <i class="el-icon-arrow-up u-reg-text"></i>
    </button>
    <ul class="slider-wrapper u-df-st u-fd-col" ref="sliderWrapper">
      <li
        v-for="(item, idx) in visibleItems"
        :key="item.id"
        :class="activeTag === item.id ? 'slider-slide--active' : ''"
        class="slider-slide u-df-ct u-base-fg u-prim-text"
        @click="handleClick(item)"
      >
        <div ref="sliderItem" :class="showAnimate[idx] ? 'slider-animate' : null">{{ item.name }}</div>
      </li>
    </ul>
    <button class="slider-button" @click="slideNext">
      <i class="el-icon-arrow-down u-reg-text"></i>
    </button>
  </div>
</template>

<style lang="scss" scoped>
.slider-container {
  width: 120px;
  // height: 300px;
}
.slider-wrapper {
  overflow: hidden;
  width: 100%;
  align-items: center;
}

.slider-track {
  display: flex;
  width: 100%;
}

.slider-slide {
  width: 120px;
  height: 40px;
  margin: 10px 0;
  // background: linear-gradient(180deg, rgba(0, 102, 255, 0) 0%, rgba(0, 212, 255, 0.8) 100%);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: 200ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: 200ms;
  -webkit-transition-timing-function: ease-in-out;
  > div {
    white-space: nowrap;
    width: max-content;
    &:hover {
      animation-play-state: paused;
    }
  }
  .slider-animate {
    animation: 8s wordsLoop linear infinite normal;
  }
}
@keyframes wordsLoop {
  0% {
    transform: translateX(120px);
    -webkit-transform: translateX(120px);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(120px);
    -webkit-transform: translateX(120px);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
.slider-slide:hover {
  // background: linear-gradient(180deg, rgba(0, 102, 255, 0) 0%, rgba(0, 255, 203, 0.8) 100%);
  background-color: #ff9900;
  color: #fff;
}
.slider-slide--active {
  // background: linear-gradient(180deg, rgba(0, 102, 255, 0) 0%, rgba(0, 255, 203, 0.8) 100%);
  background-color: #ff9900;
  color: #fff;
}

.slider-button {
  border: none;
  background: unset;
  cursor: pointer;
}
</style>
